<template>
	<div class="mk-panel">
		<div class="panel-header" v-if="title">
			<slot name="header">{{ title }}</slot>
		</div>
		<div class="panel-content full-table" v-bind="$attrs">
			<slot>面板内容</slot>
		</div>
	</div>
</template>

<script setup lang="ts">
// 基础面板
// 用法
// <MkPanel title="标题"></MkPanel> 
// <MkPanel> </MkPanel> // 不设置标题则不显示标题栏
import { ref } from 'vue';

defineOptions({
	name: 'MkPanel',
	inheritAttrs: false
})

const props = defineProps({
	title: {
		type: String,
		default: '' // 默认不显示标题栏
	},
	collapsed: { // 默认折叠
		type: Boolean,
		default: true
	}
})

</script>

<style lang="scss" scoped>
.mk-panel {
	background-color: #fff;
	border-radius: 4px;
	margin: 0px 6px 6px 0px;

	.panel-header {
		display: flex;
		justify-content: space-between;
		font-size: medium;
		color: #1479d7;
		padding: 6px 10px 6px 10px;
		border-bottom: 1px solid #F8F8F8;
	}

	.panel-content {
		padding: 10px 10px 5px 10px;
	}
}
</style>
